<html>
	<head>
		<title>Carnegie FS | Employee Area</title>
		#{include 'html_head.html'/}
		<script type="text/javascript">
			function checknum(obj){
				if(/^\d+\.?\d{0,2}$/.test(obj.value)){
				  obj.value = obj.value;
				}else{
					obj.value = obj.value.substring(0,obj.value.length-1);
				}
			}		
			
			$(document).ready(function() {				
				// Dialog box settings
				$("#create_cust_account_dialog").dialog({
					width: 550,
					height: 700,
					modal: true,
					autoOpen: false
				});
				
				$("#create_emp_account_dialog").dialog({
					width: 550,
					height: 350,
					modal: true,
					autoOpen: false
				});
				
				$("#reset_password_dialog").dialog({
					width: 500,
					height: 190,
					modal: true,
					autoOpen: false
				});
				
				$("#deposit_dialog").dialog({
					width: 450,
					height: 250,
					modal: true,
					autoOpen: false
				});				
				
				$("#create_fund_dialog").dialog({
					width: 400,
					height: 250,
					modal: true,
					autoOpen: false
				});

				$("#outcome_dialog").dialog({
					width: 400,
					height: 100,
					modal: true,
					autoOpen: false
				});							
				
				// Autocomplete
				var searchOptions = new Array(${all_customers});
				$("#customer_lookup_box").autocomplete({
					source: searchOptions
				});
			});

			// For opening dialog boxes
			var open_create_cust_account_dialog = function(){
				$("#create_cust_account_dialog").dialog('open');
			};
			var open_reset_password_dialog = function(){
				$("#reset_password_dialog").dialog('open');
			};				
			var open_deposit_dialog = function(){
				$("#deposit_dialog").dialog('open');
			};			
			var open_create_emp_account_dialog = function(){
				$("#create_emp_account_dialog").dialog('open');
				$("#create_emp_account_dialog > input").val("");
			};
			var open_create_fund_dialog = function(){
				$("#create_fund_dialog").dialog('open');
			};
			var open_outcome_dialog = function(){
				$("#outcome_dialog").dialog('open');
			};
		</script>		
	</head>

	<body>
		<div id="container">
			<!-- Page Header -->
			#{include 'header.html'/}
	
			<!-- Content Area -->
			<div id="content">
				<div class="title">Staff Admin</div>
				<table width="100%">
					<tr>
						<td class="profile_item_lbl">Employee Name</td>
						<td class="profile_item_value">${first_name} ${last_name}</td>
					</tr>
					<tr>
						<td class="profile_item_lbl">Username</td>
						<td class="profile_item_value">${username}</td>
					</tr>
					<tr>
						<td class="profile_item_lbl">Employees Only</td>
						<td>
							<button class="button_black" onclick="open_create_emp_account_dialog()">Create Account</button>
							<button class="button_black" onclick="open_create_fund_dialog()">Create Fund</button>
							<button class="button_black" onclick="window.location.href='transition'">Transition Day</button>
						</td>
					</tr>					
					<tr>
						<td class="profile_item_lbl">Customer Services</td>
						<td>
							<button class="button_green" onclick="open_create_cust_account_dialog()">Create Account</button>
							<button class="button_green" onclick="open_reset_password_dialog()">Reset Password</button>
							<button class="button_green" onclick="open_deposit_dialog()">Deposit Check</button>
						</td>
					</tr>
					<tr>
						<td class="profile_item_lbl">Lookup</td>
						<td>
							<form action="customerLookup" method="post">
							<input type="text" id="customer_lookup_box" placeholder="Enter customer ID / name" name="keyword" size="30" />
							<input type="submit" class="button_green" value="Search" />
							</form>
						</td>
					</tr>
				</table>
			</div>

			<!-- Page Footer -->
			#{include 'footer.html'/}
			
			<!-- Dialog Boxes -->			
			<div id="create_cust_account_dialog" title="Create New Customer Account">
				#{form @EmployeeArea.createCustomerHandler() , id:'create_customer_form', name:'create_customer_form'}
					#{if flash.err_type == 'create_cust'}
						#{ifErrors}
							<script>open_create_cust_account_dialog()</script>
							<ul>
							#{list items:errors, as:'error' }
								<li class="error">${error}</li>
							#{/list}
							</ul>
						#{/ifErrors}
					#{/if}
					<table width="100%">
						<tr>
							<td class="tbl_header">*Username</td>
							<td class="tbl_row"><input type="text" name="username" id="username" value="${flash.username}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Password</td>
							<td class="tbl_row"><input type="password" name="password" id="password" value="${flash.password}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*First Name</td>
							<td class="tbl_row"><input type="text" name="firstname" id="firstname" value="${flash.firstname}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Last Name</td>
							<td class="tbl_row"><input type="text" name="lastname" id="lastname" value="${flash.lastname}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Address 1</td>
							<td class="tbl_row"><input type="text" name="addr_line1" id="addr_line1" value="${flash.addr_line1}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">Address 2</td>
							<td class="tbl_row"><input type="text" name="addr_line2" id="addr_line2" value="${flash.addr_line2}" size="50" /></td>
						</tr>						
						<tr>
							<td class="tbl_header">*City</td>
							<td class="tbl_row"><input type="text" name="city" id="city" value="${flash.city}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*State</td>
							<td class="tbl_row"><input type="text" name="state" id="state" value="${flash.state}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Zip Code</td>
							<td class="tbl_row"><input type="text" name="zip" id="zip" value="${flash.zip}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Cash</td>
							<td class="tbl_row"><input type="text" name="cashString" id="cashString" value="${flash.cashString}" size="50" placeholder="In USD" onkeyup="checknum(this);" /></td>
						</tr>						
					</table>
					*Required field
					<div align="right"><button class="button_black">Create Account</button></div>
				#{/form}
			</div>

			<div id="reset_password_dialog" title="Reset Password">
				#{form @EmployeeArea.resetCustomerPasswordHandler()}
					#{if flash.err_type == 'reset_pwd'}
						#{ifErrors}
							<script>open_reset_password_dialog()</script>
							<ul>
							#{list items:errors, as:'error' }
								<li class="error">${error}</li>
							#{/list}
							</ul>
						#{/ifErrors}
					#{/if}				
					<table width="100%">
						<tr>
							<td class="tbl_header">Customer's Username</td>
							<td class="tbl_row"><input type="text" name="username" id="username" value="${flash.username}" size="50" /></td>
						</tr>
					</table>
					<div align="right"><button class="button_black">Reset Password</button></div>
				#{/form}
			</div>		
			
			<div id="deposit_dialog" title="Deposit Check">
				#{form @EmployeeArea.depositCheck(), name:'deposit_check_form'}
					#{if flash.err_type == 'deposit_check'}
						#{ifErrors}
							<script>open_deposit_dialog()</script>
							<ul>
							#{list items:errors, as:'error' }
								<li class="error">${error}</li>
							#{/list}
							</ul>
						#{/ifErrors}
					#{/if}				
					<table width="100%">
						<tr>
							<td class="tbl_header">Customer's Username</td>
							<td class="tbl_row"><input type="text" name="username" id="username" value="${flash.username}" /></td>
						</tr>				
						<tr>
							<td class="tbl_header">Amount</td>
							<td class="tbl_row"><input type="text" name="depositamount" id="depositamount" value="${flash.depositamount}" placeholder="in USD" onkeyup="checknum(this);" /></td>
						</tr>
					</table>
					<div align="right"><button class="button_black">Deposit Check</button></div>
				#{/form}
			</div>
			
			<div id="create_emp_account_dialog" title="Create New Employee Account">
				#{form @EmployeeArea.createEmployeeHandler()}
					#{if flash.err_type == 'create_emp'}
						#{ifErrors}
							<script>open_create_emp_account_dialog();</script>
							<ul>
							#{list items:errors, as:'error' }
								<li class="error">${error}</li>
							#{/list}
							</ul>
						#{/ifErrors}
					#{/if}
					<table width="100%">
						<tr>
							<td class="tbl_header">*Username</td>
							<td class="tbl_row"><input type="text" name="username" id="username" value="${flash.username}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Password</td>
							<td class="tbl_row"><input type="password" name="password" id="password" value="${flash.password}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*First Name</td>
							<td class="tbl_row"><input type="text" name="firstname" id="firstname" value="${flash.firstname}" size="50" /></td>
						</tr>
						<tr>
							<td class="tbl_header">*Last Name</td>
							<td class="tbl_row"><input type="text" name="lastname" id="lastname" value="${flash.lastname}" size="50" /></td>
						</tr>
					</table>
					*Required field
					<div align="right"><button class="button_black">Create Account</button></div>
				#{/form}
			</div>

			<div id="create_fund_dialog" title="Create Fund">
				#{form @EmployeeArea.createFund()}
					#{if flash.err_type == 'create_fund'}
						#{ifErrors}
							<script>open_create_fund_dialog();</script>
							<ul>
							#{list items:errors, as:'error' }
								<li class="error">${error}</li>
							#{/list}
							</ul>
						#{/ifErrors}
					#{/if}				
					<table width="100%">
						<tr>
							<td class="tbl_header">Fund Name</td>
							<td class="tbl_row"><input type="text" name="fundname" id="fundname" value="${flash.fundname}" /></td>
						</tr>				
						<tr>
							<td class="tbl_header">Symbol</td>
							<td class="tbl_row"><input type="text" name="symbol" id="symbol" value="${flash.symbol}" /></td>
						</tr>
					</table>
					<div align="right"><button class="button_black">Create Fund</button></div>
				#{/form}
			</div>
			
			<div id="outcome_dialog" title="Message">
				${flash.outcome}
				#{if flash.outcome}
					<script>open_outcome_dialog()</script>
				#{/if}
			</div>
		</div>
	</body>

</html>